<template>
  <div>
    <el-form inline>
      <!-- <el-form-item label="是否显示柱状图">
        <el-checkbox v-model="formm.isBar" label="柱状图" border @change="toggleBar" />
      </el-form-item>
      <el-form-item label="是否显示光柱">
        <el-checkbox v-model="formm.isLight" label="光柱" border @change="toggleLight" />
      </el-form-item>-->
      <el-form-item label="背景颜色">
        <el-color-picker v-model="colorsF.background" @change="changeBgColor" />
      </el-form-item>
      <el-form-item label="顶部颜色">
        <el-color-picker
          v-model="colorsF.topFace"
          @change="changeColor(colors.topFace,'mapMesh',0)"
        />
      </el-form-item>
      <el-form-item label="边缘颜色">
        <el-color-picker v-model="colorsF.side" @change="changeColor(colors.side,'mapMesh',1)" />
      </el-form-item>
      <el-form-item label="柱状图颜色">
        <el-color-picker v-model="colorsF.bar" @change="changeColor(colors.bar,'bar')" />
      </el-form-item>
      <el-form-item label="光柱颜色">
        <el-color-picker v-model="colorsF.light" @change="changeColor(colors.light,'light')" />
      </el-form-item>
      <el-form-item label="上边线颜色">
        <el-color-picker v-model="colorsF.upLine" @change="changeColor(colors.upLine,'upLine')" />
      </el-form-item>
      <el-form-item label="下边线颜色">
        <el-color-picker
          v-model="colorsF.downLine"
          @change="changeColor(colorsF.downLine,'downLine')"
        />
      </el-form-item>
      <el-form-item label="描边宽度">
        <el-input-number v-model="formm.linewidth" :step="0.001" @change="changeLine"></el-input-number>
      </el-form-item>
      <el-form-item label="地图图片">
        <!-- <el-upload
          accept="image/*"
          action="#"
          :multiple="false"
          :on-change="httpRequest"
          :auto-upload="false"
          list-type="picture-card"
        >
          <i class="el-icon-plus"></i>
        </el-upload>-->
      </el-form-item>
    </el-form>

    <div class="rank"></div>
  </div>
</template>

<script>
import { colors, linewidth } from "@/utils/config";
export default {
  props: {
    form: {
      type: Object,
      default: () => {}
    },
    colors: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      formm: {
        linewidth: linewidth
      },
      colorsF: this.colors
    };
  },
  methods: {
    changeColor(color, name, index) {
      this.emitBack();
      this.$emit("changeColor", color, name, index);
    },
    changeBgColor() {
      this.emitBack();
      this.$emit("changeBgColor", this.colorsF.background);
    },
    changeLine() {
      this.emitBack();
      this.$emit("changeLine", this.form.linewidth);
    },
    toggleBar() {
      this.emitBack();
      this.$emit("addBar", this.formm.isBar, "bar");
    },
    toggleLight() {
      this.emitBack();
      this.$emit("toggle", this.formm.isLight, "lightPoint");
    },
    emitBack() {
      this.$emit("update:form", this.formm);
      this.$emit("update:colors", this.colorsF);
    }
  }
};
</script>

<style lang="scss" scoped>
.rank {
  position: absolute;
  // width: 50px;
  // height: 50px;
  // border-radius: 50%;
  // border: 3px solid #818f97;
  // z-index: 1;
  // background-color: rgba($color: #000000, $alpha: 0.5);
  // background-color: rgba(0, 0, 0, 0.5); /* 透明黑色背景，alpha值为0.5 */
  // border-radius: 3px; /* 圆角大小 */
  // padding: 10px; /* 内边距 */
  // width: 50px;
  // height: 30px;
  // color: white; /* 文本颜色 */
  // font-size: 12px; /* 字体大小 */
  // box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.3); /* 阴影效果 */
  // box-sizing: border-box;
}
</style>